<template>
  <label class="notes">
    <span>{{fieldName}}</span>
    <input :value="value.tagName" type="text" @focusout="editTagName($event)">
  </label>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class Notes extends Vue {
  @Prop({required:true}) fieldName!: string;
  @Prop() tag!: {'id':string,'tagName':string};
  value = this.tag;

  editTagName() {
      this.$emit('tagEdit', {'id':this.value.id,'tagName':(event!.target as HTMLInputElement).value});
  }
}
</script>

<style lang="scss" scoped>
.notes {
  display: flex;
  align-items: center;
  padding-left: 16px;
  background-color: #fff;

  span {
    font-size: 14px;
    padding-right: 16px;
  }

  input {
    font-size: 16px;
    padding: 16px 0;
    background-color: transparent;
    border: none;
    flex-grow: 1;
    opacity: 0.6;

    &:focus {
      outline: none;
    }
  }
}
</style>